<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" id="time">
        <input type="button" value="暂停" onclick="clearTimer()">
        <input type="button" value="继续" onclick="setTimer()">
    </form>
</body>
<script>
    /**
     * 2、在文本框中动态地显示当前日期和时间(js设置文本框的value属性即可改变文本框的显示)，
     * 可以暂停，也可以继续。请依据给出的文档结构写出实现此功能的JavaScript代码。
     * 
     * 要求：
     * 页面完成加载后开始显示日期和时间。
     * 
     * 日期和时间的显示格式参考效果截图，
     * 即“XXXX年XX月XX日  XX时:XX分:XX秒”，
     * 当数字小于10的时候在数字前面加0补齐位数。
    */

    //2020012314  20级6班   李博

    var time = document.getElementById("time");
    var intervalId;

    function identify(num){
       return num<10?"0"+num:num;
    }

    function creatTime(){
       var now = new Date();
       var year = now.getFullYear();
       var month = now.getMonth()+1;
       var day = now.getDate();
       var hour = now.getHours();
       var minute = now.getMinutes();
       var second = now.getSeconds();
       month = identify(month);
       day = identify(day);
       hour = identify(hour);
       minute = identify(minute);
       second = identify(second);
       var result = year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
       return result;
    }

    function setTimer(){
        clearInterval(intervalId);
        intervalId = setInterval(function(){
            time.value = creatTime();
        },1000);
    }

    function clearTimer(){
        clearInterval(intervalId);
    }

    window.onload = setTimer();
</script>
</html>